<template>
  <div class="login">
    <div class="account" v-if="!isPhoneLogin">
      <top-header :isLeft="false" title="欢迎登录下厨房"></top-header>
      <div class="login-content">
        <login-input
          v-for="(item, index) in accountData"
          :key="index"
          :info="item"
        ></login-input>
      </div>
      <div class="login-opreate">
        <a-button
          type="primary"
          block
          shape="round"
          @click="login(accountData)"
        >
          登录
        </a-button>
        <a-button type="link" @click="toggleLoginBox"> 注册新账号 </a-button>
      </div>
    </div>
    <div class="zhuce" v-if="isPhoneLogin">
      <top-header :isLeft="true" title="注册新账号登录"></top-header>
      <div class="zhuce-content">
        <login-input
          v-for="(item, index) in phoneData"
          :key="index"
          :info="item"
        ></login-input>
      </div>
      <div class="zhuce-opreate">
        <a-button type="primary" block shape="round" @click="regist(phoneData)">
          注册
        </a-button>
        <a-button type="link" @click="toggleLoginBox">
          使用账号密码登录
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import LoginInput from "../components/LoginInput.vue";
import TopHeader from "../components/TopHeader.vue";
import QS from "qs";
import { Dialog } from "vant";
export default {
  components: { TopHeader, LoginInput },

  name: "login",
  data() {
    return {
      isPhoneLogin: false,
      accountData: {
        username: {
          label: "用户名/邮箱",
          val: "",
        },
        password: {
          label: "密码",
          val: "",
          type: "password",
        },
      },
      phoneData: {
        phoneNum: {
          label: "用户名",
          val: "",
        },
        verificationCode: {
          label: "密码",
          val: "",
          type: "password",
        },
        querenpassword: {
          label: "确认密码",
          val: "",
          type: "password",
        },
      },
      errorFlag: false,
      errorMsg: "",
    };
  },
  created() {
    this.show();
  },
  methods: {
    show() {
      localStorage.clear();
      console.log(localStorage);
    },
    //切换登录模式
    toggleLoginBox() {
      this.isPhoneLogin = !this.isPhoneLogin;
    },
    //登录
    login(accountData) {
      console.log(accountData.username.val);
      console.log(accountData.password.val);
      // username=accountData.username;
      // password=accountData.password;
      if (accountData.username.val == "" || accountData.password.val == "") {
        alert("请输入用户名和密码");
      } else {
        let params = {
          username: accountData.username.val,
          password: accountData.password.val,
        };
        this.$ajax
          .post("/mysql/login.php", QS.stringify(params))
          .then((res) => {
            console.log(res);
            if (res.data.length == 0) {
              this.$message("用户名或密码错误");
              this.$router.go(0);
            } else if (res.data.length > 0) {
              console.log(res.data);
              var arr = res.data;
              arr.some((i) => {
                // this.$store.dispatch('getUser',i.username)
                localStorage.id = i.uid;
                localStorage.name = i.username;
                console.log(localStorage.name);
              });

              this.$router.push({
                name: "Home",
              });
            }
          });
      }
    },
    regist() {
      console.log(this.phoneData.phoneNum.val);
      if (
        this.phoneData.phoneNum.val == "" ||
        this.phoneData.verificationCode.val == ""
      ) {
        alert("用户名，密码不能为空");
      } else {
        if (
          this.phoneData.verificationCode.val ==
          this.phoneData.querenpassword.val
        ) {
          let params = {
            username: this.phoneData.phoneNum.val,
          };
          this.$ajax
            .post("/mysql/loginselect.php", QS.stringify(params))
            .then((res) => {
              console.log(res.data);

              if (res.data.length == 0) {
                let params = {
                  username: this.phoneData.phoneNum.val,
                  password: this.phoneData.verificationCode.val,
                };
                this.$ajax
                  .post("/mysql/regist.php", QS.stringify(params))
                  .then((res) => {
                    console.log(res);
                    Dialog.alert({
                      message: "注册成功",
                    }).then(() => {
                      this.$router.go(0);
                    });
                  });
              } else {
                this.$message("用户名已存在");
              }
            });
        } else {
          this.$message("两次输入的密码不一致");
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: white;
  .account,
  .phone {
    height: 100%;
    .login-content {
      margin-top: 70px;
      padding: $common-padding;
    }

    .login-opreate {
      height: 20%;
      padding: $common-padding;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
  }
  .zhuce-content {
    margin-top: 70px;
    padding: $common-padding;
  }
  .zhuce-opreate {
    height: 20%;
    padding: $common-padding;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  }
}
h2 {
  font-size: 2rem;
  font-weight: bolder;
}
.icon-guanbi {
  font-size: 20px;
  font-weight: bolder;
}
</style>